import React, { useState } from 'react'
import {View, Text, Input, Textarea, Picker, Image} from '@tarojs/components'
import PageWrapper from '@/components/PageWrapper'
import SingleVideoUploader from '@/components/SingleVideoUploader/SingleVideoUploader'
import MultiImageUploader from '@/components/MultiImageUploader/MultiImageUploader'
import './index.scss';

const Source = ({ data }: { data: any[] }) => {
  return (
    <View className="source-box">
      {data.map((item,index)  => (
        <View  key={index} className={item.checked !== 1 ? 'source-item-no-checked source-item' : 'source-item-checked source-item'} >
          {item.name}
        </View>
      ))}
    </View>
  );
};
const Page = () => {
  const [images, setImages] = useState<string[]>([])
  const [video, setVideo] = useState<string | null>(null)
  const [selectedIndex, setSelectedIndex] = useState(0)
  const [date, setDate] = useState('2025-07-20') // 默认值
  const cityList = ['白酒类', '红酒类', '洋酒类', '啤酒类']

  const sourceList = [
      { name: '京东',checked: 0 },
      { name: '淘宝',checked: 1 },
      { name: '天猫',checked: 0 },
      { name: '抖音',checked: 0 },
      { name: '回收',checked: 0 },
      { name: '超市',checked: 0 },
      { name: '以上都不是',  checked: 0 },
    ];
  const handleChange = (e) => {
    setSelectedIndex(e.detail.value)
  }
  const handleTimeChange = (e) => {
    setDate(e.detail.value)
  }
  const handleSourceChange = (e) => {
    setDate(e.detail.value)
  }

  return (
    <PageWrapper title="在线鉴定" showBack={true} backgroundColor='#F0F0F0'>
      <View className="sell-viedo-page">
        <View className="sell-viedo-upimg-box">
          <View className="viedo-title-item" >产品品类</View>
          <View className="selector-container">
            <Text className="label">类型：</Text>
            <Picker mode="selector" range={cityList} onChange={handleChange}>
              <View className="picker-view">
                {cityList[selectedIndex]}
              </View>
            </Picker>
          </View>
          <View className="viedo-title-item" >产品图片</View>
          <View className="sell-viedo-up-box">
            <View className="sell-viedo-up">
              <MultiImageUploader
                maxCount={1}
                value={images}
                onChange={(newList) => setImages(newList)}
              />
              <View className="top-20">瓶帽顶部</View>
            </View>
            <View className="sell-viedo-up">
              <MultiImageUploader
                maxCount={1}
                value={images}
                onChange={(newList) => setImages(newList)}
              />
              <View className="top-20">瓶帽顶部接口</View>
            </View>
            <View className="sell-viedo-up">
              <MultiImageUploader
                maxCount={1}
                value={images}
                onChange={(newList) => setImages(newList)}
              />
              <View className="top-20">瓶帽海洋标</View>
            </View>
            <View className="sell-viedo-up">
              <MultiImageUploader
                maxCount={1}
                value={images}
                onChange={(newList) => setImages(newList)}
              />
              <View className="top-20">瓶帽侧面纹路</View>
            </View>
            <View className="sell-viedo-up">
              <MultiImageUploader
                maxCount={1}
                value={images}
                onChange={(newList) => setImages(newList)}
              />
              <View className="top-20">瓶帽喷码</View>
            </View>
            <View className="sell-viedo-up">
              <MultiImageUploader
                maxCount={1}
                value={images}
                onChange={(newList) => setImages(newList)}
              />
              <View className="top-20">商标</View>
            </View>
          </View>
        </View>
        <View className="sell-viedo-upimg-box">
          <View className="viedo-title-item">产品视频</View>
          <View className="sell-viedo-up">
            <SingleVideoUploader
              value={video || ''}
              onChange={(url) => setVideo(url)}
            />
          </View>
        </View>
        <View className="sell-viedo-upimg-box">
          <View className="viedo-title-item">产品信息</View>
          <View className="online-goods-item">
            <View className="online-goods-title">产品名称：</View>
            <Input className="online-goods-input"></Input>
          </View>
          <View className="online-goods-item">
            <View className="online-goods-title">生产日期：</View>
            <Picker mode="date" value={date} onChange={handleTimeChange}>
              <View className="online-goods-input">
                {date}
              </View>
            </Picker>
          </View>
        </View>
        <View className="sell-viedo-upimg-box">
          <View className="viedo-title-item">产品来源</View>
          <Source data={sourceList}></Source>
        </View>
        <View className="sell-viedo-msg-box">
          <View>
            <View className="viedo-title-item">产品备注</View>
            <Textarea className="viedo-title"></Textarea>
          </View>
          <View>
            <View className="viedo-title-item">注意事项</View>
            <View className="viedo-remark-item">1.请参考示例上传图片</View>
            <View className="viedo-remark-item">2.工作时间:早上10点-下午3点</View>
            <View className="viedo-remark-item">3.提交鉴定代表您默认同意《在线鉴定须知》</View>
          </View>
        </View>

        <View className="online-but-box">
          <View className="online-but black">
            <View className="font-weight-bold">免费鉴定</View>
            <View>三个工作日内出结果</View>
          </View>
          <View className="online-but orange">
            <View className="font-weight-bold">VIP鉴定（10元）</View>
            <View>最快2小时</View>
          </View>
        </View>
      </View>
    </PageWrapper>
  )
}

export default Page
